<template>
  <el-card>
    <el-row type="flex" justify="end">
      <el-button @click="addFn" icon="el-icon-edit" type="primary" size="small"
        >添加</el-button
      >
    </el-row>
    <!-- 表格 -->
    <el-table
      width="100%"
      class="table"
      :data="treeList"
      style="width: 100%; margin-bottom: 20px; margin-top: 20px"
      row-key="id"
      border
      :default-expand-all="true"
      :tree-props="{ children: 'childs' }"
    >
      <el-table-column
        align="center"
        prop="title"
        label="标题"
        sortable
        width="250"
      >
        <template slot-scope="{ row }">
          <i :class="row.icon"></i>
          <span style="margin-left: 10px">{{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="权限点代码" width="300">
        <template slot-scope="{ row }">
          <span>{{ row.code }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" prop="phone" label="操作">
        <template slot-scope="{ row }">
          <el-button @click="editFn(row.id)" type="primary" size="small"
            >修改</el-button
          >
          <el-button @click="delFn(row.id)" type="danger" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- --------------------------------- -->
    <!-- 创建菜单弹出框 -->
    <AddMenu ref="addMenu" @updateList="initData"></AddMenu>
  </el-card>
</template>

<script>
import { getMenuListApi, getMenuInfoApi, delMenuApi } from "@/api/houtai";
import AddMenu from "./components/addMenu.vue";
export default {
  name: "Menu",
  data() {
    return {
      list: [],
      count: 0,
      treeList: [],
      defaultProps: {
        children: "points" || [],
        label: "title" || "",
      },
    };
  },
  components: {
    AddMenu,
  },
  created() {
    this.initData();
  },
  methods: {
    // DealDataFun(arr) {
    //   if (arr[1].childs) {
    //     arr[1].points = arr[1].childs;
    //     arr[1].points.forEach((item) => {
    //       item.points = item.childs;
    //     });
    //     return arr;
    //   }
    // },
    // DealDataFun(str) {
    //   return JOSN.parse(str.replace("pionts", "childs"));
    // },

    async initData() {
      // const res = await getLogListApi();
      // console.log(res);
      // const { roles } = await getLogListApi();
      // console.log(roles);
      // this.list = roles.menus;

      const res = await getMenuListApi();
      this.treeList = res;
      // this.DealDataFun(res);
      // console.log(res);
      // this.DealDataFun(JSON.stringify(res));

      // 动态图标
      res.forEach((item) => {
        if (item.pid === null) {
          item.icon = "fa fa-folder-open-o";
          if (item.points) {
            item.points.forEach((val) => {
              val.icon = "fa fa-file-o";
              if (val.points) {
                val.points.forEach((v) => {
                  v.icon = "fa fa-eye";
                });
              }
            });
          }
        }
        if (item.childs) {
          item.childs.forEach((val) => {
            val.icon = "fa fa-folder-open-o";
            if (val.childs) {
              val.childs.forEach((v) => {
                v.icon = "fa fa-file-o";
                if (v.points) {
                  v.points.forEach((a) => {
                    a.icon = "fa fa-eye";
                  });
                }
              });
            }
          });
        }
      });
    },

    // 添加按钮
    addFn() {
      this.$refs.addMenu.showDialog = true;
      this.$refs.addMenu.disabled = false;
      this.$refs.addMenu.formData.is_point = false;
    },
    // 编辑按钮事件
    async editFn(id) {
      // console.log(id);
      this.$refs.addMenu.disabled = true;
      this.$refs.addMenu.showDialog = true;
      this.$refs.addMenu.editId = id;
      this.$refs.addMenu.statusId = id;
      // 获取菜单详情
      const res = await getMenuInfoApi(id);
      // console.log(res);
      this.$refs.addMenu.formData = res;
    },
    // 删除按钮事件
    async delFn(id) {
      try {
        await this.$confirm("确定删除吗");
      } catch (error) {
        return console.log(error);
      }
      await delMenuApi(id);
      this.initData();
    },

    // 图标修改
  },
};
</script>

<style lang="scss" scoped>
::v-deep .table {
  font-size: 16px;
}
::v-deep .el-icon-arrow-right {
  visibility: hidden;
}
</style>
